<template>
    <div class="task-review">
        <h2>跑腿任务审核</h2>

        <!-- 显示加载状态 -->
        <div v-if="loading" class="loading-spinner">
            <span class="loader"></span> 正在加载任务数据...
        </div>

        <!-- 显示任务数据 -->
        <div v-if="tasks.length > 0">
            <div v-for="task in tasks" :key="task.taskId" class="task-item">
                <div class="task-image-wrapper">
                    <img v-if="task.imageUrl" :src="task.imageUrl" alt="任务图片" class="task-image" />
                </div>
                <div class="task-details">
                    <h3 class="task-title">{{ task.title }}</h3>
                    <p class="task-description">{{ task.description }}</p>
                    <p class="task-taskId">任务id： {{ task.taskId }}</p>
                    <p class="task-type">任务类型: {{ task.type }}</p>
                    <p class="task-commission">佣金: ¥{{ task.commission }}</p>
                    <p class="task-deadline">截止日期: {{ task.deadline }}</p>
                    
                </div>
            </div>
        </div>

        <!-- 显示没有任务的提示 -->
        <div v-if="tasks.length === 0 && !loading" class="no-tasks">
            没有可审核的任务
        </div>


        <!-- 跳转到任务审核页面按钮 -->
        <router-link to="/audit-task">
            <button class="audit-btn">跳转到任务审核</button>
        </router-link>

        
    </div>
</template>

<script>
// 引入专门的任务审核接口管理模块
import { getTaskLobby, updateTaskStatus } from '@/api/taskreview';

export default {
    data() {
        return {
            tasks: [], // 存储任务数据
            loading: true, // 控制加载状态
            page: 1, // 当前页码
            pageSize: 10, // 每页数量
            filters: {
                status: '待审核', // 初始筛选状态
            }
        };
    },
    methods: {
        // 获取任务大厅数据
        async fetchTasks() {
            try {
                this.loading = true;
                this.tasks = await getTaskLobby(this.page, this.pageSize, this.filters); // 调用 taskreview.js 中的接口方法
            } catch (error) {
                this.$message.error(error.message || '任务数据加载失败，请稍后重试');
            } finally {
                this.loading = false;
            }
        },

        // 处理任务审核通过的操作
        async approveTask(taskId) {
            try {
                // 更新任务状态为 "可接单"
                await updateTaskStatus(taskId, '可接单');
                
                // 刷新任务列表
                this.fetchTasks();
                this.$message.success('任务审核通过！');
            } catch (error) {
                this.$message.error(error.message || '任务状态更新失败，请稍后重试');
            }
        },
    },
    created() {
        this.fetchTasks(); // 组件创建时调用接口
    },
};
</script>


<style scoped>
.task-review {
    padding: 20px;
    font-family: 'Arial', sans-serif;
    background-color: #f3f4f6;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

.loading-spinner {
    text-align: center;
    font-size: 18px;
    color: #888;
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.task-item {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.task-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.task-image-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.task-image {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.task-details {
    color: #555;
}

.task-title {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
    color: #333;
}

.task-description,
.task-type,
.task-commission,
.task-deadline {
    font-size: 16px;
    margin: 5px 0;
}

.task-type,
.task-commission,
.task-deadline {
    color: #888;
}

button {
    padding: 12px 24px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #45a049;
}

.no-tasks {
    text-align: center;
    font-size: 18px;
    color: #888;
}
</style>
